import { Input, Text, View } from "@tarojs/components";
import { useState } from "react";
import { useDate } from "../../hooks/useDate";
import "./styles.module.less";

//时间格式 使用lang参数可以导入
export interface DateTimePickerLang {
  y?: string;
  m?: string;
  d?: string;
  h?: string;
  min?: string;
  s?: string;
  confirm?: string;
  cancel?: string;
  placeholder?: string;
}

//日期组件的props类型
interface DateTimePickerProps {
  format?: string;
  onChange?: (date: string) => void;
  lang?: DateTimePickerLang;
  placeholder?: string;
}

//默认展示语言文字
const defaultLang = {
  y: "年",
  m: "月",
  d: "日",
  h: "时",
  min: "分",
  s: "秒",
  confirm: "确认",
  cancel: "取消",
  placeholder: "请选择时间"
};

//组件本体
export const DateTimePicker = (props: DateTimePickerProps) => {
  let { format, onChange, lang, placeholder } = props;
  //format默认格式
  format || (format = "YYYY-MM-DD hh:ss:ss");
  //#region 语言初始化设置
  if (lang) {
    lang.y || (lang.y = defaultLang.y);
    lang.m || (lang.m = defaultLang.m);
    lang.d || (lang.d = defaultLang.d);
    lang.h || (lang.h = defaultLang.h);
    lang.min || (lang.min = defaultLang.min);
    lang.s || (lang.s = defaultLang.s);
    lang.confirm || (lang.confirm = defaultLang.confirm);
    lang.cancel || (lang.cancel = defaultLang.cancel);
    lang.placeholder = lang.placeholder
      ? lang.placeholder
      : placeholder
      ? placeholder
      : defaultLang.placeholder;
  } else {
    lang = defaultLang;
  }

  //#endregion

  //选择日期控件展示
  const [isShow, setIsShow] = useState(false);

  //input框内展示的文字
  const [iptVal, setIptVal] = useState("");

  //打开日期控件
  const openMubu = () => {
    setIsShow(true);
  };
  //关闭日期控件
  const closeMubu = () => {
    setIsShow(false);
  };
  const clickConfirm = () => {
    closeMubu();
    onChange && onChange(iptVal);
  };
  return (
    <View>
      <Input
        value={iptVal}
        onFocus={openMubu}
        placeholder={lang.placeholder}
      ></Input>
      <View
        style={({ display: isShow ? "block" : "none" } as unknown) as string}
        className='mubu'
      >
        <View onClick={closeMubu} className='close'></View>
        <SelectDate
          format={format}
          clickConfirm={clickConfirm}
          colseMunu={closeMubu}
          setIptVal={setIptVal}
          lang={lang}
        ></SelectDate>
      </View>
    </View>
  );
};

interface SelectDateProps {
  format: string;
  setIptVal: (v: string) => void;
  colseMunu: () => void;
  lang: DateTimePickerLang;
  clickConfirm: () => void;
}

export function SelectDate(props: SelectDateProps) {
  const { format, setIptVal, colseMunu, lang, clickConfirm } = props;
  let res = useDate(new Date(), format, lang);
  const confirm = () => {
    setIptVal(res.toDate());
    colseMunu();
    clickConfirm();
  };
  return (
    <View className='selectDate'>
      <View className='header'>
        <Text onClick={colseMunu}>{lang.cancel}</Text>
        <Text onClick={confirm}>{lang.confirm}</Text>
      </View>
      <View className='DateBox'>
        {res.y.isShow ? <ItemBox data={res.y}></ItemBox> : ""}
        {res.m.isShow ? <ItemBox data={res.m}></ItemBox> : ""}
        {res.d.isShow ? <ItemBox data={res.d}></ItemBox> : ""}
        {res.h.isShow ? <ItemBox data={res.h}></ItemBox> : ""}
        {res.min.isShow ? <ItemBox data={res.min}></ItemBox> : ""}
        {res.s.isShow ? <ItemBox data={res.s}></ItemBox> : ""}
      </View>
    </View>
  );
}

interface ItemBoxProps {
  data: { arr: number[]; active: number; set: Function; label?: string };
}
export function ItemBox(props: ItemBoxProps) {
  const {
    data: { arr, active, set, label }
  } = props;
  const click = (n: number) => {
    set(n);
  };
  return (
    <View style={({ flex: 1 } as unknown) as string}>
      <View class='label'>{label}</View>
      <View className='itemBox'>
        {arr.map((d, i) => (
          <View
            style={({ color: d === active ? "red" : "" } as unknown) as string}
            onClick={() => click(d)}
            className='itemContent'
            key={i}
          >
            {d}
          </View>
        ))}
      </View>
    </View>
  );
}
